<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <miniAppSelect
          :is-resize="isResize"
          :multiple="true"
          :reserve="false"
          @result="miniAppResult"
        />
        <BiFormItem label="分销方">
          <template slot="content">
            <el-select
              v-model="requestData.distributor_id"
              clearable
              multiple
              filterable
              collapse-tags
              placeholder="请选择分销方"
            >
              <el-option
                v-for="item in distributorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch('查询')"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button
            v-permission:distribution-add
            type="primary"
            @click="addNewApp"
          >新增</el-button>

        </div>
      </div>

      <!-- v-permission:distribution-watchDetails -->
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:name="{ row }">
            <div class="rowFlex  columnCenter">
              <div class="miniAppImage">
                <el-image
                  :src="row.headimg || 'https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/default.png'"
                  class="titleImage"
                ></el-image>
                <svg-icon
                  v-if="row.app_type==1"
                  icon-class="miniapp"
                  class="imageIcon"
                />
                <svg-icon
                  v-else
                  icon-class="douyin"
                  class="imageIcon"
                />
              </div>
              <div class="miniApp">
                <!--  @click="toLinkWechat(row)"-->
                <p class="title">{{ row.mini_app_name }}
                  <el-popover
                    placement="right"
                    trigger="hover"
                  >
                    <div>
                      <el-image
                        :src="row.qr_code"
                        class="qrImage"
                      ></el-image>
                    </div>
                    <svg-icon
                      slot="reference"
                      icon-class="qr-code"
                      style="color:#333;"
                    />
                  </el-popover>
                </p>
                <p class="infoText">{{ row.app_id }}</p>
              </div>
            </div>
          </template>
          <template v-slot:zip="{ row }">
            <el-button
              v-permission:distribution-start
              type="text"
              size="medium"
              @click="shareSetting(row)"
            >{{ row.status==1?'禁用':'启用' }}</el-button>
          </template>
        </BiTable>
      </div>
    </Block>
    <!-- 新增 -->
    <BiDrawer
      v-model="addMiniApp"
      drawer-title="新增"
      :distributor-list="distributorList"
      :component="drawerComponent.addMiniApp"
      drawer-size="350px"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>
<script>
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
import BiDrawer from '@/components/BiDrawer'
import addMiniApp from './component/addItem.vue'
import { distributorList, setStatus } from '@/api/distribution'
import { commonData } from '@/api/common'
export default {
  name: 'MiniAPP',
  components: {
    miniAppSelect,
    BiDrawer
  },
  data() {
    return {
      requestData: {
        mini_app_id: [],
        distributor_id: []
      },
      distributorList: [],
      addMiniApp: false,
      isResize: false,
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawerComponent: {
        addMiniApp: addMiniApp
      },
      rowInfo: {},
      tableData: [],
      tableColums: [
        {
          label: '小程序ID',
          prop: 'id',
          width: '100'
        },
        {
          label: '小程序名称',
          prop: 'name',
          slotScope: true
        },
        {
          label: '项目',
          prop: 'blongs'
        },
        {
          label: '分销方',
          prop: 'distributor_name'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        },
        {
          label: '创建人',
          prop: 'operator'
        },
        {
          label: '操作',
          prop: 'zip',
          width: '180',
          slotScope: true
        }
      ]
    }
  },

  mounted() {
    this.initData()
    this.$AccessReport.report('zhangyu-minApp', [this.$store.state.user.routerItem.name, '分销方管理'])
  },
  methods: {
    handleCommand(value, row) {
      this.rowInfo = row
    },
    startSearch() {
      this.page_info = {
        page: 1,
        page_size: 20,
        total: 0
      }
      this.clickSearch()
    },
    requestDistributor() {
      commonData({ type: 'distributor' }).then((res) => {
        if (res.data.data.length > 0) {
          this.distributorList = res.data.data
        }
      })
    },
    addNewApp() {
      this.addMiniApp = true
    },
    initData() {
      this.clickSearch()
      this.requestDistributor()
    },
    miniAppResult(value) {
      this.requestData.id = value
    },
    clickSearch() {
      const data = {
        mini_app_id: this.requestData.id,
        distributor_id: this.requestData.distributor_id
      }
      this.loading = true
      distributorList({ ...data, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
      })
    },
    reset() {
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 2000)
      this.$set(this, 'requestData', {
        id: [],
        app_type: ''
      })
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    shareSetting(row) {
      setStatus({ id: row.id, status: row.status == 1 ? 2 : 1 }).then((res) => {
        this.$message.success(res.msg)
        this.clickSearch()
      })
    },
    handlePageChange(page) {
      console.log(page)
      this.clickSearch()
    },
    onSubmit() {
      this.clickSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
}
.miniApp {
  margin-left: 10px;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
    color: #06c261;
    cursor: pointer;
  }
  .sub {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin: 0;
  }
}
.miniAppImage {
  width: 40px;
  height: 40px;
  position: relative;
  .imageIcon {
    font-size: 14px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 40px;
  }
}

.titleImage {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
.qrImage {
  width: 200px;
  height: 200px;
}
.recordIcon {
  font-size: 24px;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  top: 5px;
}
.colorDian {
  margin: 0 10px;
}
</style>
